<template>
    <div class="video-div">
        <d-player
            ref="player"
            id="player"
            :options="options"
            :autoplay="true"
            @ratechange="ratechange"
            @canplay="canplay"
            @play="play"
            @seeked="seeked"
            @loadeddata="loadeddata"
        ></d-player>
    </div>
</template>

<script>
// import VueDPlayer from "vue-dplayer";
import "vue-dplayer/dist/vue-dplayer.css";
import { mapState } from "vuex";
import { getOssUrl } from "@/assets/utils/utils.js";
export default {
    name: "videoDplayer",
    components: {
        // "d-player": VueDPlayer,
    },
    props: {
        url: {
            type: String,
            default: "",
        },
        pic: {
            type: String,
            default: "",
        },
        autoplay: {
            type: Boolean,
            default: true,
        },
        rate: {
            type: Number,
            default: 1,
        },
        isPlay: {
            type: String,
            default: "0",
        },
    },
    beforeMount() {
        // 只会在浏览器执行
        this.$options.components["d-player"] = () => import("vue-dplayer");
    },
    data() {
        return {
            options: {
                autoplay: false, // 视频自动播放
                container: document.getElementById("dplayer"), //播放器容器
                mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
                theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
                loop: false, // 是否自动循环
                lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
                screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
                hotkey: true, // 是否支持热键，调节音量，播放，暂停等
                preload: "auto", // 自动预加载
                volume: 1, // 初始化音量
                playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2], //可选的播放速度，可自定义
                // logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
                video: {
                    url: getOssUrl(this.url), // 播放视频的路径
                    // quality: [
                    //     // 设置多个质量的视频
                    //     {
                    //         name: "高清",
                    //         url: "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
                    //         type: "auto" // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
                    //     },
                    //     {
                    //         name: "标清",
                    //         url: "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
                    //         type: "auto"
                    //     }
                    // ],
                    // defaultQuality: 0, // 默认是高清
                    pic: getOssUrl(this.pic), // 视频封面图片
                    // thumbnails: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=24336452,906724543&fm=26&gp=0.jpg" // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
                },
                // subtitle: {
                //   //字幕
                //   url: "", //字幕网址
                //   color: "#fff", //字幕颜色
                //   fontSize: "20px",
                //   bottom: "40px"
                // },
                // danmaku: {
                //     // 弹幕
                //     id: "9E2E3368B56CDBB4",
                //     api: "https://api.prprpr.me/dplayer/",
                //     token: "tokendemo", //后端验证令牌
                //     maximum: 1000, //弹幕最大数量
                //     addition: ["https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142"], //其他弹幕
                //     user: "DIYgod", //弹幕用户名
                //     bottom: "15%", //值，例如：10px，10％，即弹幕底部和播放器底部之间的距离，以防止遮挡字幕
                //     unlimited: true //即使弹幕重叠也显示所有弹幕
                // },
                // contextmenu: [
                //     //  自定义上下文菜单
                //     // 右键菜单
                //     {
                //         text: "b站",
                //         link: "https://www.bilibili.com"
                //     },
                //     {
                //         text: "选项二",
                //         click: player => {
                //             console.log(player);
                //         }
                //     }
                // ],
                // highlight: [
                //     //进度条上的自定义时间标记
                //     // 进度条时间点高亮
                //     {
                //         text: "10M",
                //         time: 6
                //     },
                //     {
                //         text: "20M",
                //         time: 12
                //     }
                // ]
            },

            isOne: 0,
        };
    },
    mounted() {},
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        seeked() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => {});
            }
        },
        play() {
            this.$emit("play");
            // setTimeout(() => {
            //     this.$refs.player.dp.speed(this.rate);
            // }, 800);
        },
        onPause() {
            this.$refs.player.dp.pause();
        },
        seek(index) {
            this.$refs.player.dp.seek(index);
        },
        loadeddata() {
            if (this.isPlay == "0") return;
            setTimeout(() => {
                this.$refs.player.dp.play();
            }, 300);
        },
        getSecond() {
            console.log(this.$refs.player.dp.video.currentTime);
        },
        ratechange() {
            // console.log(this.$refs.player.dp.video.playbackRate);
            // this.$emit("ratechange", this.$refs.player.dp.video.playbackRate);
            if (this.$refs.player.dp.video.playbackRate == 1) {
                this.dplayerSpeedIcon.innerHTML = "倍速";
            } else {
                this.dplayerSpeedIcon.innerHTML =
                    this.$refs.player.dp.video.playbackRate + "x";
            }
        },

        canplay() {
            this.dplayerSpeedIcon = document.getElementsByClassName(
                "dplayer-setting-icon"
            )[0];
            this.dplayerSpeedIcon.innerHTML = "倍速";
        },
    },
};
</script>
<style>
.dplayer-setting-speed-panel {
    display: block !important;
}

.dplayer-setting-origin-panel {
    display: none !important;
}

.dplayer-setting-box {
    width: 70px !important;
}

.dplayer-setting-icon {
    color: #ffffff;
    width: 60px !important;
    font-size: 15px;
    /* padding: 0 8px !important; */
    line-height: 1 !important;
}
</style>
<style lang="scss" scoped>
.video-div{
    width: 97%;
}
</style>